<template>
	<div class="container logoIn">
		<div class="myform">
			<form class="form-horizontal">
				<div class="dlWarning" id="dlWarning">
					{{ warning_p }}
				</div>
				<div class="form-group">
					<label for="inputEmail3" class="col-sm-3 control-label">账号</label>
					<div class="col-sm-9">
						<input type="email" class="form-control" id="inputEmail" placeholder="请输入账号" v-model="user.username">
					</div>
				</div>
				<div class="form-group">
					<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
					<div class="col-sm-9">
						<input type="password" class="form-control" id="inputPassword" placeholder="请输入密码" v-model="user.password">
					</div>
				</div>
				<div class="form-group">
					<div>
						<button @click="Test" class="btn btn-default col-sm-offset-5 col-sm-4">登录</button>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-7 col-sm-4">
						<router-link to="/registered">前往注册</router-link>
					</div>
				</div>
			</form>
		</div>
	</div>

</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				user: {
					username: '',
					password: '',
				},
				warning_p: ''
			}
		},
		mounted() {

		},
		methods: {
			Test() {
				axios({
					url: '/user/login',
					method: 'POST',
					data: {
						name: this.user.username,
						password: this.user.password
					}
				}).then((res) => {

					this.warning_p = res.data.message;
					if(res.data.success == true) {
						setTimeout(() => {
							location.href = "http://127.0.0.1:8080/vusermanage/pusermessage";
						}, 1000)
					} else {
						location.href = "http://127.0.0.1:8080/vusermanage/registered";

					}
				});
			}
		}
	}
</script>

<style scoped>
	.user_message {
		margin-left: 80%;
	}
	
	.user_login,
	.user_registered {
		text-align: center;
	}
	
	.myform .dlWarning {
		text-align: center;
		width: 20%px;
		height: 50px;
		font-size: 20px;
	}
	
	.logoIn {
		width: 100%;
		height: 60%;
		background: no-repeat url(../../static/logIn.jpg);
		background-size: 100% 40% cover;
		background-position: center;
	}
	
	.logoIn .myform {
		margin-top: 25%;
		width: 400px;
		height: 300px;
		background-color: #00F5FF;
		margin-left: 60%;
		padding-top: 50px;
		padding-left: 30px;
		border-radius: 100%;
	}
	
	.logoIn .myform .form-group {
		width: 330px;
	}
</style>